<script setup>
import { ref } from 'vue';
	
	//getWindowInfo获取窗口信息,获取导航栏高度
	const windowInfo = uni.getWindowInfo()
	
	// #ifdef MP
	const menuRect = uni.getMenuButtonBoundingClientRect()
	// console.log(menuRect)
	// #endif
	
	// #ifdef H5
		//H5端没有胶囊按钮信息,自己设置为0
	const menuRect = {width:0}
	// #endif
	
	
	// 数据驱动视图
	//1.定义数据
	// 2.绑定数据
	// 3.修改数据
	
	const entryList = ref([
		{
			icon:'https://p0.ssl.qhimg.com/t01f222be1309c2fd7f.png',
			text:'全部产品'
		},
		{
			icon:'https://p4.ssl.qhimg.com/t01d7427e1f6239b1b1.png',
			text:'360搜索'
		},
		{
			icon:'https://p2.ssl.qhimg.com/t0199146ed535ecd65e.png',
			text:'360商城'
		},
		{
			icon:'https://p1.ssl.qhimg.com/t0192c6a682125e6cc9.png',
			text:'360游戏'
		}
	])
	
	const softwareList = ref([
		{
			icon:'https://p3.ssl.qhimg.com/t0128439c6143122bad.png',
			name:'手机卫士',
			size:8.95,
			download:'https://sjws.ssl.qihucdn.com/mobilesafe/shouji360/360safe/500193/360MobileSafe.apk'
		},
		{
			icon:'https://p2.ssl.qhimg.com/t01fa9c1531e3294ca3.png',
			name:'手机卫士',
			size:27.75,
			download:'手机卫士下载链接'
		},
		{
			icon:'https://p1.ssl.qhimg.com/t01d5f0eeb2cc0b0ecd.png',
			name:'浏览器',
			size:79.2,
			download:'手机卫士下载链接'
		},
		{
			icon:'https://p3.ssl.qhimg.com/t015eebd58e3c9362f7.png',
			name:'清理大师',
			size:5.8,
			download:'手机卫士下载链接'
		},
		
		{
			icon:'https://p3.ssl.qhimg.com/t01a555ce62565c3aa9.png',
			name:'极速浏览器',
			size:54.00,
			download:'手机卫士下载链接'
		},
		{
			icon:'https://p1.ssl.qhmsg.com/t01ac094f0e7138f4c1.png',
			name:'省电王',
			size:2.8,
			download:'手机卫士下载链接'
		},
		{
			icon:'https://p4.ssl.qhmsg.com/t01e4c126e44c6e0e47.png',
			name:'免费wifi',
			size:3.8,
			download:'手机卫士下载链接'
		},
		{
			icon:'https://p2.ssl.qhimg.com/t01cbde8755c0c23978.jpg',
			name:'安全客',
			size:9.98,
			download:'手机卫士下载链接'
		},
	])
	
	const goToPage = (url) => {
		//通过API  方式跳转页面，优势：可以处理跳转的业务逻辑
		uni.navigateTo({
			url:url
		})
	}
	
	const hardwareList = ref([
		{
			type:'hardware-item01',
			name:'360智能摄像机',
			desc:'有家有TA，安心相伴',
			icon:'https://p0.ssl.qhimg.com/t014d0b0d86ea859959.png'
		},
		{
			type:'hardware-item02',
			name:'360家庭防火墙',
			desc:'极速速上网安全无忧',
			icon:'https://p3.ssl.qhimg.com/t0128f83364e8c9d4be.png'
		},
		{
			type:'hardware-item02',
			name:'360儿童手表',
			desc:'为爱守护，乐享生活',
			icon:'https://p0.ssl.qhimg.com/t010035192a7645472c.png'
		},
		{
			type:'hardware-item03',
			name:'360行车记录仪',
			desc:'安全驾驶，为您保驾护航',
			icon:'https://p3.ssl.qhimg.com/t01d3e53e82813eec78.png'
		},
		{
			type:'hardware-item03',
			name:'360扫地机器人',
			desc:'解放双手，智享生活',
			icon:'https://p5.ssl.qhimg.com/t012fa14e716336e657.png'
		},
		{
			type:'hardware-item01',
			name:'360生态链',
			desc:'生态互联，牵手未来',
			icon:'https://p1.ssl.qhimg.com/t01a44368ac0c2055a4.png'
		},
	])
	
	//返回顶部
	const scrollTop = ref(0)
	const backTop = () => {
		scrollTop.value = 0
	}
	
	//滚动时触发
	let timerId = -1
	//是否显示返回顶部按钮
	const isShowTop = ref(false)
	
	const onScroll = (event) => {
		clearTimeout(timerId)
		//保存滚动条位置
		timerId = setTimeout(()=>{
			scrollTop.value = event.detail.scrollTop
			//判断滚动条位置是否超过200
			if(scrollTop.value >= 200) {
				isShowTop.value = true
			}
			else{
				isShowTop.value = false
			}
		},100)
	}
	
	const isShowMenu = ref(false)
	
</script>

<template>
	<!-- 结构 -->
	<!-- 1.自定义导航栏 -->
	<view class="header" :style="{
		paddingTop:windowInfo.statusBarHeight + 'px',
		paddingRight:menuRect.width + 10 + 'px',
		height:menuRect.height + 10 + 'px'
		}">
		<!-- 左侧logo -->
		<image class="header-logo" src="https://p2.ssl.qhimg.com/t01893213e448dbbfa2.png" mode="heightFix"></image>
		<!-- 右侧菜单 -->
		<image @click="isShowMenu = !isShowMenu" class="header-menu" src="https://p1.ssl.qhmsg.com/t010fa93a99715aad32.png" mode=""></image>
		
		<!-- 菜单列表 -->
		<view class="header-menu-list" :class=" isShowMenu ? 'is-show-menu':'' ">
			菜单列表
		</view>
	</view>
	
	<!-- scroll-view   滚动容器 -->
	<scroll-view scroll-y scroll-with-animation :scroll-top="scrollTop" @scroll="onScroll" class="scroll-body" :style="{
		height:`calc( 100vh - ${menuRect.height + 10 + 'px'} - ${ windowInfo.statusBarHeight + 'px'})`
	}">
		
	
	
	<!-- 2.轮播图 -->
	 <swiper class="swiper-banner"
		autoplay
		circular
		indicator-dots
		interval="2000"
		indicator-color="rgba(255,255,255,0.3)"
		indicator-active-color="#fff"
	 >
		 
		<swiper-item>
			<image class="swiper-image" src="https://p2.ssl.qhimg.com/t011e7a7b3f6cc9bfdd.jpg" mode=""></image>
		</swiper-item>
		<swiper-item>
			<image class="swiper-image" src="https://p2.ssl.qhimg.com/t011e7a7b3f6cc9bfdd.jpg" mode=""></image>
		</swiper-item>
		<swiper-item>
			<image class="swiper-image" src="https://p2.ssl.qhimg.com/t011e7a7b3f6cc9bfdd.jpg" mode=""></image>
		</swiper-item>
	</swiper>
	<!-- 3.产品入口 -->
	<!-- 布局公式
	 1.排版
	 2.内容
	 3.美化
	 
	 
	-->
	<view class="entry">
		<view v-for="item in entryList" class="entry-item">
			<image class="entry-image" :src="item.icon" mode="heightFix"></image>
			<text class="entry-text">{{item.text}}</text>
		</view>
		
	</view>
	
	<view class="divider"></view>
	<!-- 手机软件 -->
	<view class="software">
		<text class="software-title"> 手机软件</text>
		<!-- row 横排   wrap 换行 -->
		<view class="software-list row wrap" >
			<!-- column 竖排 -->
			<view v-for="item in softwareList" class="software-item column">
				<image @click="goToPage('/pages/software/software')" class="software-image" :src="item.icon" mode=""></image>
				<text class="software-name">{{item.name}}</text>
				<text class="software-size">{{item.size + 'M'}}</text>
				
				<!-- #ifdef H5 -->
				<a :href="item.download" class="software-download">
					<text>下载</text>
				</a>
				
				<!-- #endif -->
				<!-- 条件编译，navigator方式，只能跳转本地,必须在pages.json中注册 -->
				<!-- #ifdef MP -->
				<!-- <navigator url="/pages/software/software" class="software-download">查看</navigator> -->
				<navigator target="miniProgram" short-link="#小程序://滴滴出行丨打车骑行火车租车代驾/URxDVslF8MF5arz" class="software-download">打开</navigator>
				<!-- #endif -->
				
			</view>
		</view>
	</view>
	
	<view class="divider"></view>
	<!-- 智能硬件 -->
	<view class="hardware">
		<text class="floor-title">智能硬件</text>
		<view class="hardware-list" >
			<view v-for="item in hardwareList" :class="item.type">
				<text class="hardware-name">{{item.name}}</text>
				<!-- 注意列表有三种形态，文字的先后排列顺序有区别 -->
				<!-- hardware-item编号为 01 和 03 时，desc先于image，为 02 时,image先于desc -->
				<text v-if="item.type === 'hardware-item01' || item.type === 'hardware-item03' " class="hardware-desc">{{item.desc}}</text>
				<image class="hardware-image" :src="item.icon"></image>
				<text v-if="item.type === 'hardware-item02'" class="hardware-desc">{{item.desc}}</text>
				
			</view>
			<!-- 查看更多 -->
			<view class="hardware-item03">
				形态1-查看更多
			</view>
			<!-- <view class="hardware-item02">
				<text class="hardware-name">360家庭防火墙</text>
				<image class="hardware-image" src="https://p3.ssl.qhimg.com/t0128f83364e8c9d4be.png"></image>
				<text class="hardware-desc">极速速上网安全无忧</text>
				
			</view> -->
			<!-- <view class="hardware-item02">
				形态2
			</view>
			<view class="hardware-item03">
				形态3
			</view>
			<view class="hardware-item03">
				形态3
			</view>
			<view class="hardware-item01">
				形态1
			</view>
			<view class="hardware-item01">
				形态1
			</view> -->
		</view>
		
	</view>
	</scroll-view>
	<!-- 返回顶部 -->
	<image v-show="isShowTop" @click="backTop" class="back-top" src="…Z3EggAcYwJH4iQfnq/wcAXUhTNPpF7Q0AAAAASUVORK5CYII="></image>
</template>

<!-- scss   css增强版---css预处理器 -->
<style lang="scss">
	@import '../../uni.scss';
	/* 样式 */
	.header{
		/* rpx 响应式像素，小程序用于实现屏幕适配新增的单位 */
		/* 屏幕宽度统一为750rpx,相当于将屏幕分为750份 */
		
		/* #ifdef MP */
		height: 80rpx;
		/* #endif */
		
		/* #ifdef H5 */
		height: 96rpx;
		/* #endif */
		
		background-color: $uni-color-primary;
		padding-top: 60rpx;
		padding-left: 20rpx;
		
		/* flex 模式 */
		display: flex;
		 /*主轴对齐 justify-content: ; */
		justify-content: space-between;
		 /*交叉轴对齐*/
		align-items: center;
		//相对定位 - 子绝父相
		position: relative;
		z-index: 1;
		
		
		.header-logo{
			width: 166rpx;
			height: 64rpx;
		}
		.header-menu{
			width: 44rpx;
			height: 32rpx;
		}
		.header-menu-list {
			width: 100%;
			height: 330rpx;
			background-color: rgba(0, 0, 0, 0.5);
			position: absolute;
			
			left: 0;
			bottom: -330rpx;
			
			opacity: 0;
			transition: all 0.4s;
			//点击穿透
			pointer-events: none;
		}
		
		.is-show-menu {
			opacity: 1;
			pointer-events: auto;
			
		}
	}
	.swiper-banner,
	.swiper-image{
		width: 100%;
		height: 416rpx;
	}
	
	.entry{
		display: flex;
		height: 120rpx;
		padding-top:60rpx;
		padding-bottom: 20rpx;
	
		.entry-item{
			width: 25%;
			/* 修改主轴方向为垂直 */
			display: flex;
			flex-direction: column;
			border-right: 1rpx solid #ddd;
			align-items: center;
		}
		.entry-image{
			width:92rpx;
			height: 82rpx;
			margin-bottom: 10rpx;
		}
		.entry-text{
			font-size: 24rpx;
		}
	}
	
	
	.software{
		padding: 50rpx,30rpx;
		
		.software-title{
			font-size: 48rpx;
			color: #333;
		}
		.software-item{
			width: 25%;
			display: flex;
			flex-direction: column;
			align-items: center;
		}
		.software-size{
			font-size: 30rpx;
			color: #cdcdcd;
		}
		.software-download{
			margin-top: 10rpx;
			font-size: 30rpx;
			color: $uni-color-primary;
			background-color: #E2F2E2;
			padding: 4rpx 10rpx;
			width: 100rpx;
			height: 50rpx;
			border-radius: 50rpx;
			text-align: center;
			line-height: 50rpx;
		}
		.software-image{
			width: 96rpx;
			height: 96rpx;
		}
	}
	
	.floor-title{
		font-size: 48rpx;
		color: #333;
	}
	.hardware{
		.hardware-item01,
		.hardware-item02,
		.hardware-item03{
			//浮动 ->环绕效果
			float: left;
			//盒子模型：边框盒子 => 宽度高度包含border 和 padding
			box-sizing: border-box;
			width: 50%;
			border-top: 1rpx solid #f60;
			padding: 30rpx;
		}
		
		.hardware-item01{
			//400rpx 在iphone 15 pro max 上形态1的盒子 400rpx 转换成了 229px
			//而形态2的盒子 200rpx 转换成 114px，由于形态1的盒子多了 1px ，最终导致布局错乱
			//bug定位：  rpx 底层会自动转换成px，出现小数会四舍五入，导致bug出现
			//解决方案，减少形态1盒子的高度为398rpx，最终转换成228px 与右侧形态2盒子对其
			height: 398rpx;
		}
		.hardware-item02{
			height: 200rpx;
			padding-right: 0;
			padding-bottom: 0;
			
			.hardware-name{
				display: block;
			}
			
			.hardware-image{
				float: right;
				width: 168rpx;
				height: 112rpx;
			}
		}
		.hardware-item03{
			height: 175 * 2rpx;
		}
		
		.hardware-list {
			// 选中第几个元素
			view:nth-child(1),
			view:nth-child(4),
			view:nth-child(6) {
				border-right:1rpx solid #f60 ;
			}
		}
		
		.hardware-name{
			font-size: 30rpx;
			color: #333;
		}
		
		.hardware-desc{
			font-size: 26rpx;
			color: #999;
			margin-top: 20rpx;
		}
		
		.hardware-image{
			
			width: 270rpx;
			height: 89 * 2rpx;
		}
	}

	.scroll-body{
		//利用calc(减去自定义导航栏的高)
		height: calc(100vh - 100rpx);
	}
	
	.back-top{
		width: 80rpx;
		height: 80rpx;
		background-color: $uni-color-primary;
		
		//relative 相对于自己定位
		//absolute 相对于父元素
		position: fixed;//相对于视口定位
		right: 40rpx;
		bottom: 80rpx;
		border-radius: 50%;
	}
</style>